
<!-- 单文件组件 -->
<template>
  <div>
    <h1>这是One组件</h1>
    <p>生命周期</p>
    <p>初始 模板  挂载 更新  销毁</p>
    <p>dasdas</p>
    <h1 ref="aa" @click="hidd">{{ count }}</h1>
    <h1>{{ count }}</h1>
    <button @click="xiezai">卸载</button>
    <button @click="changeData">改变数据</button>
  </div>
</template>

<script>
/* 
因为其他地方要用这个组件所有要暴露
因为 export default 舒服 -- import XX from '' 爽
vue.extend()  不要
//注册 components时 会帮我们 搞定 创建组件
//到时候 使用组件标签 得到组件实列 爽
*/
export default {
  name: "Son",
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    hidd() {
      // console.log(this.$refs.aa);
      this.$refs.aa.style.opacity = 0;
      // console.log( this.$$refs("aa"));
    },
    changeData() {
      this.count++;
    },
    xiezai() {
      // 完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
      // 触发 beforeDestroy 和 destroyed 的钩子。
      this.$destroy();
    },
  },
  /* 
  vue的生命周期有5阶段
  分别是初始 模板 挂载 更新 卸载
  在初始阶段 vue 初始化了生命周期和事件
  */

  beforeCreate() {
    console.log("--------beforeCreate-----");
  },
  created() {
    console.log("------created--------");
  },

  beforeMount() {
     console.log("------beforeMount--------");
  },
  mounted(){
       console.log("--------mounted------");
  },
  beforeUpdate() {
        console.log("------beforeUpdate--------");
  },
  updated() {
    console.log("-----updated--------");
  },

  beforeDestroy() {
    console.log("-------beforeDestroy------");
  },
  destroyed() {
    console.log("------destroyed-------");
  },
};
</script>


<style>
</style>
